import React from 'react';
import { Icon as AntdIcon, List } from 'antd-mobile';
import file from '@/pages/RecruitEmail/images/file.png';
// import { Icon } from '@/pages/Recruitment/components';
import UploadWork from '../UploadWork';
import styles from './index.less';

const { Item } = List;
// import { Button, WhiteSpace, WingBlank } from 'antd-mobile';
const UploadMobile = props => {
    const { fileList, changeFileList, removeFile, showErr, maxNum, ...rest } = props;

    const renderListView = () =>
        fileList.length > 0 && (
            <List className={styles.mb80}>
                {fileList.map(item => (
                    <Item className={styles.item} key={item.uid}>
                        <div className={styles.detailContainer}>
                            <div className={styles.detailName}>
                                {/* <Icon type="file" className={styles.pr10} /> */}
                                <img src={file} alt="" className={styles.file} />
                                <span className={styles.fileTitle}>{item?.name.split('.')[0]}</span>
                                <span>.{item?.name.split('.')[1]}</span>
                            </div>

                            <AntdIcon
                                type="cross-circle-o"
                                onClick={() => removeFile(item.uid, fileList)}
                                size="xxs"
                                color="#858B9B"
                            />
                        </div>
                    </Item>
                ))}
            </List>
        );
    return (
        <div className={styles.container}>
            <span className={styles.label}>上传文件：</span>
            {renderListView()}
            <UploadWork
                showUploadList={false}
                fileList={fileList}
                setFileList={_fileList => {
                    if (changeFileList) {
                        changeFileList(_fileList);
                    }
                }}
                showErr={showErr}
                checkFileSize={50}
                checkFileType="rar、zip、pdf、jpg、doc、docx、png"
                checkFileTypeMsg="只能上传rar、zip、pdf、jpg、doc、docx、png格式的文件！"
                checkFileSizeMsg="文件大小不能超过50MB！"
                {...rest}
            >
                {(!maxNum || fileList.length < maxNum) && (
                    <p className={styles.uploadHint}>
                        <AntdIcon type="plus" className={styles.pr10} />
                        <span>添加附件</span>
                    </p>
                )}

                <p className={styles.uploadText}>
                    支持扩展名：.rar .zip .doc .docx .pdf .jpg，大小50Mb以内{maxNum ? `，最多上传${maxNum}个` : ''}
                </p>
                {/* <p className={styles.uploadText}>支持pdf、doc、xls、docx、wps、html、txt等格式</p> */}
            </UploadWork>
        </div>
    );
};
// UploadMobile.proTypes={
//     uploadUrl:React.PropTypes.
// }
export default UploadMobile;
